<template>
	<view class="feedBack ">
		<view class="mBox ">
			<view class="container scale-1px-top">
				<view class="box scale-1px-bottom">
					<input type="text" v-model="titles"  placeholder="请输入意见反馈标题"/>
				</view>
				
				<view class=" box1" >
					<textarea placeholder="请输入详细描述" class="sportsContent" v-model.trim="contents" maxlength="800"  />
					<view class="imgs">
						<view class="pic" v-for="(val,i) in imgs" :key='i'>
							<image :src="val" mode=""></image>
							<image class="del" src="../../../static/img/col.png" mode="" @tap="del(i)"></image>
						</view>
						<view class="camera" v-if="imgs.length<9">
							<image src="../../../static/img/camera.png"  @tap="chooseImg" mode=""></image>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
		
		<view class="sBox">
			<view class="box2 scale-1px-bottom">
				<input type="text" v-model.trim="name" value="" placeholder="请输入你的姓名"/>
			</view>
			
			<view class="box2">
				<input type="number" v-model.trim="phone" value="" placeholder="请输入你的联系方式"/>
			</view>
		</view>
		<view class="bottom">
			<button :disabled="disabled" @tap="update">提交审核</button>
		</view>
	</view>
</template>

<script>
	import {isPhone,isPwd,isEmail} from '@/api/reg.js'
	export default {
		data() {
			return {
				titles:'',
				contents:'',
				disabled:false,
				phone:'',
				name:'',
				imgs:[],
			}
		},
		onLoad() {

		},
		methods: {
			del(i){
				this.imgs.splice(i,1)
			},
			chooseImg(){
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				uni.chooseImage({
					count: 9,
					success: res => {
						console.log(res)
						for(let i=0;i<res.tempFilePaths.length;i++){
							uni.uploadFile({
								url: 'https://admin.51zhandashi.com/api/common/upload_qiniu',
								filePath: res.tempFilePaths[i],
								name: 'upfile',
								formData:{
									token:token,
									user_id:user_id,
									filename:'upfile'
								},
								success: (e) => {
									let v=JSON.parse(e.data)
									console.log(res)
									if(v.sta==200){
										// this.user.headimgurl=res.data.url
										this.imgs.push(v.data.url)
									}
								}
											
							});
						}
					console.log(this.imgs)
					}
				})
			},
			update () {
				if (this.titles == '') {
					return uni.showToast({
						title:'请输入标题',
						icon:'none'
					})
				}
				if (this.contents == '') {
					return uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}
				if (this.imgs == '') {
					return uni.showToast({
						title:'请上传图片',
						icon:'none'
					})
				}
				if (this.name == '') {
					return uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
				}
				if (this.phone == '') {
					return uni.showToast({
						title:'请输入电话号码',
						icon:'none'
					})
				}
				if (isPhone(this.phone) == 'phoneErr') {
					return uni.showToast({
						title:'请输入正确的电话号码',
						icon:'none'
					})
				}
				this.disabled = true;
				uni.showLoading({
					mask:true
				});
				let img=this.imgs.toString(',')
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				let data = {
					title:this.titles,
					name:this.name,
					phone:this.phone,
					content:this.contents,
					img,
					token,
					user_id
				};
				this.http('/api/feedback/save','post',data).then(res => {
					if (res.sta == 200) {
						uni.showToast({
							icon:'none',
							title:'反馈提交成功',
							success: () => {
								setTimeout( () => {
									uni.navigateBack({
										delta:1
									})
								},500)
							}
						})
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						})
					}
					uni.hideLoading();
					this.disabled = false;
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background:rgba(242,242,245,1);
	}
	.feedBack{
		
		.mBox{
			
			background-color: #fff;
			.container{
				padding: 40rpx;
				.box{
					padding-bottom:40rpx;
				}
				
				.box1{
					position: relative;
					padding: 40rpx 0;
					.sportsContent{
						width: 100%;
						height: 200rpx;
						box-sizing: border-box;
						border-radius:10rpx;
					}
					.imgs{
						margin-top: 30rpx;
						display: grid;
						grid-template-columns: repeat(3, 154rpx);
						grid-row-gap: 30rpx;
						grid-column-gap: 30rpx;
						.pic{
							width: 154rpx;
							height: 154rpx;
							position: relative;
							image{
								display: block;
								width: 154rpx;
								height: 154rpx;
							}
							.del{
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: -10rpx;
								right: -10rpx;
								z-index: 1;
							}
							
						}
						.camera{
							width: 154rpx;
							height: 154rpx;
							border: 1rpx dashed #eee;
							line-height: 154rpx;
							text-align: center;
							image{
								width: 56rpx;
								height: 56rpx;
							}
						}
					}
				}
			}
		}
		
		.sBox{
			padding: 0 40rpx;
			background-color: #fff;
			margin-top: 40rpx;
			.box2{
				padding: 40rpx 0;
				// input{
				// 	height: 100%;
				// }
			}
			
		}
		
		.bottom{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 40rpx;
			margin-top: 80rpx;
			button{
				background-color: #2291FF !important;
				font-size:36rpx;
				color: #fff;
				width:100%;
				height:100%;
				line-height: 90rpx;
				border-radius:5px;
			}
		}
		
		
	}
</style>
